<template>
	<sc-dialog
		v-model="visible"
		show-fullscreen
		:title="titleMap[mode]"
		width="800px"
		@close="close"
	>
		<el-form
			ref="formRef"
			label-width="100px"
			:model="formData"
			:rules="rules"
		>
			<el-form-item label="所属角色" prop="parentIdList">
				<el-cascader
					v-model="formData.parentIdList"
					clearable
					filterable
					:options="parentIdOptions"
					placeholder="请选择所属角色"
					:props="parentIdProps"
					:style="{ width: '100%' }"
				/>
			</el-form-item>
			<el-form-item label="角色名称" prop="name">
				<el-input
					v-model="formData.name"
					clearable
					:maxlength="30"
					placeholder="请输入角色名称"
					show-word-limit
					:style="{ width: '100%' }"
				/>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="是否超管" prop="isSystem" required>
						<el-switch
							v-model="formData.isSystem"
							active-text="如果是超管，则不允许删除"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="formData.status" size="medium">
							<el-radio
								v-for="(item, index) in statusOptions"
								:key="index"
								:disabled="item.disabled"
								:label="item.value"
							>
								{{ item.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="排序" prop="sort" required>
				<el-slider
					v-model="formData.sort"
					:max="100"
					show-input
					:step="1"
				/>
			</el-form-item>
			<el-form-item label="多行文本" prop="summary">
				<el-input
					v-model="formData.summary"
					:autosize="{ minRows: 2, maxRows: 4 }"
					:maxlength="500"
					placeholder="请输入多行文本"
					show-word-limit
					:style="{ width: '100%' }"
					type="textarea"
				/>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">
				确 定
			</el-button>
		</template>
	</sc-dialog>
</template>
<script>
export default {
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			formData: {
				id: 0,
				parentId: 0,
                parentIdList:[],
				name: undefined,
				isSystem: false,
				summary: undefined,
				status: true,
				sort: 1,
			},
			rules: {
				parentIdList: [
					{
						required: true,
						type: "array",
						message: "请至少选择一个所属角色",
						trigger: "change",
					},
				],
				name: [
					{
						required: true,
						message: "请输入角色名称",
						trigger: "blur",
					},
				],
				status: [
					{
						required: true,
						message: "状态不能为空",
						trigger: "change",
					},
				],
				summary: [],
			},
			statusOptions: [
				{
					label: "正常",
					value: true,
				},
				{
					label: "停用",
					value: false,
				},
			],
			parentIdOptions: [],
			parentIdProps: {
				multiple: false,
				checkStrictly: true,
				expandTrigger: "hover",
			},
            
		};
	},
	mounted() {
		this.initTree()
	},
	methods: {
		async initTree() {
			const t = await this.$API.sysrole.list.get();
			let _tree = [
				{ id: "1", value: "0", label: "角色组", parentId: "0" },
			];
			t.data.some((m) => {
				_tree.push({
					id: m.id,
					value: m.id,
					label: m.name,
					parentId: m.parentId,
				});
			});
			this.parentIdOptions = this.$TOOL.changeTree(_tree)
		},
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
                var res = await this.$API.sysrole.model.get(row.id);
                res.data.parentIdList.pop()
                if(res.data.parentIdList.length==0)
                    res.data.parentIdList=['0']
				this.formData = res.data
			}
			this.visible = true
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res = null
                    if(this.formData.id===0){
                        res=await this.$API.sysrole.add.post(this.formData)
                    }else{
                        res=await this.$API.sysrole.update.put(this.formData)
                    }
					this.isSaveing = false
					if (res.code == 200) {
						this.$emit("complete")
						this.visible = false
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: "error" })
					}
				}
			});
		},
		close() {
            this.formData= {
				id: 0,
				parentId: 0,
                parentIdList:[],
				name: undefined,
				isSystem: false,
				summary: undefined,
				status: true,
				sort: 1,
			}
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
